<template>
<div class="create_gradient_cp">
    <div class="top box-shadow_2">
        <div class="top">
            <div class="top"
                :style="{
                    backgroundImage:get_gradient,
                }">
                <div class="copy">
                    <Copy
                        title="CSS"
                        :content="gradient_data.gradient">
                    </Copy>
                </div>
            </div>
            <div class="gradient_css">
                <el-input 
                    v-model="gradient_data.gradient" 
                    placeholder="请输入CSS" clearable
                    type="textarea">
                </el-input>
            </div>
            <div class="title" v-if="gradient_data.name">
                {{gradient_data.name}}
            </div>
            <div class="colors">
                <ColorList
                    :colors_data="gradient_data.gradient">
                </ColorList>
            </div>
            <div class="tags">
                <div v-for="(item,index) in get_tags" :key="index">
                    #{{item}}
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-popover
                placement="top"
                width="300"
                v-model="show">
                <el-form label-position="top" label-width="80px" :model="gradient_data">
                    <el-form-item label="名称">
                        <el-input v-model="gradient_data.name"></el-input>
                    </el-form-item>
                    <el-form-item label="标签(用'|'号隔开)">
                        <el-input v-model="gradient_data.tags"></el-input>
                    </el-form-item>
                    <el-form-item label="配色介绍">
                        <el-input type="textarea" v-model="gradient_data.content"></el-input>
                    </el-form-item>
                </el-form>
                
                <div class="add" slot="reference">
                    <Add_other_bt></Add_other_bt>
                </div>
            </el-popover>
        </div>
    </div>
    <div class="bottom" @click="on_submit">
        <Submit_bt></Submit_bt>
    </div>
    <Loading
        :state="loading">
    </Loading>
</div>

</template>

<script>
import Loading from '@/components/other/Loading';
import ColorList from '@/components/other/ColorList';
import Copy from '@/components/other/Copy';
export default {
    name: 'CreateGradient',
    components: {
        Loading,
        ColorList,
        Copy,
    },
    data(){
        return{
            show:false,
            loading:false,
            gradient_data:{
                gradient:'background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);',
                colors:'',
                name:'',
                content:'',
                tags:'',
                data_type:2,
            },
        };
    },
    computed:{
        get_gradient(){
            return this.gradient_data.gradient.replace('background-image:','').replace(';','');
        },
        get_colors(){
            let colorList = [];
            let _colorList = (this.gradient_data.gradient || '').match(/#\/?.+? /g);
            if(_colorList){
                _colorList.filter(item=>{
                    colorList.push(item.replace(' ',''));
                });
            }
            let __colorList = (this.gradient_data.gradient || '').match(/rgba\/?.+?\)/g);
            if(__colorList){
                __colorList.filter(item=>{
                    colorList.push(item.replace(' ',''));
                });
            }
            return colorList;
        },
        get_tags(){
            if(this.gradient_data.tags){
                return this.gradient_data.tags.split('|');
            }else{
                return [];
            }
        },
    },
    methods:{
        on_submit(){
            let old_length = this.$store.state.my_create.gradient.length;
            this.$store.commit('add_my_create',{
                gradient:this.gradient_data,
            });
            let new_length = this.$store.state.my_create.gradient.length;
            if(old_length !== new_length && !this.loading){ //表示数据已经添加到本地了,可以提交
                this.loading = true;
                this.$axios.my_post('/add_upload',{
                    ...this.gradient_data,
                }).catch(({msg}) =>{
                    return;
                }).finally(()=>{
                    this.loading = false;
                    //跳转到我的页面
                    this.$router.push({
                        path: '/mine',
                        query: {
                            type:'gradient',
                        }
                    }).catch(()=>{return;});
                });
            }else{
                this.$message('已经添加过该配色了！');
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.create_gradient_cp{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    >.top{
        border: none;
        background-color: white;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px;
        max-width: 400px;
        width: 100%;
        >.top{
            width: 100%;
            border: none;
            background-color: white;
            box-sizing: border-box;
            border-radius: 5px;
            text-align: left;
            //overflow: hidden;
            >.top{
                border-radius: 5px;
                overflow: hidden;
                width: 100%;
                position: relative;
                height:250px;
                background-color: aliceblue;
                >.copy{
                    width: fit-content;
                    position: absolute;
                    bottom: 5px;
                    left: 5px;
                    opacity: 0;
                    transition: all 0.2s;
                    /deep/.Copy{
                        border-radius: 3px;
                        font-size: 1.4rem;
                    }
                }
                &:hover{
                    >.copy{
                        opacity: 1;
                    }
                }
            }
            >.gradient_css{
                width: 100%;
                margin-top: 15px;
            }
            >.title{
                text-align: center;
                font-size: 1.2rem;
                line-height: 1.2rem;
                font-weight: bold;
                margin-top: 15px;
            }
            >.colors{
                /deep/.ColorList{
                    div{
                        margin: 0 7.5px;
                        margin-top: 15px;
                    }
                }
            }
            >.tags{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap:wrap;
                >div{
                    font-size: 1.1rem;
                    line-height: 1.1rem;
                    color: #899bb4;
                    margin: 0 7.5px;
                    margin-top: 15px;
                    // cursor: pointer;
                    // transition: all 0.2s;
                    // &:hover{
                    //     color: #535f6e;
                    // }
                }
            }
        }
        >.bottom{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
        }
    }
    >.bottom{
        margin-top: 35px;
    }
}
</style>

